<template>
    <div>
        <div>
            <el-config-provider :locale="zhCn"> <!--《:locale="zhCn 》设置语言-->
                <el-form :model="form" ref="form1">
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-button size="default" @click="printPage" plain><el-icon>
                                    <Printer />
                                </el-icon>打印</el-button>
                            <el-button size="default" @click="add" plain><el-icon>
                                    <CopyDocument />
                                </el-icon>复制</el-button>
                            <el-button size="default" @click="Editor" plain><el-icon>
                                    <Edit />
                                </el-icon>编辑</el-button>
                            <el-button size="default" @click="open" plain><el-icon>
                                    <Delete />
                                </el-icon>删除</el-button>
                            <hr>
                        </el-col>

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="职位名称" label-position="top">
                                    <el-input v-model="form.jobname" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light">
                                <el-form-item label="需求提交人" label-position="top">
                                    <el-input v-model="form.demandsubmitter" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="提交时间"
                                    label-position="top">
                                    <el-input placeholder="2025/07/15 09:01:04" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <!--  -->
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="需求类型" label-position="top">
                                    <el-input v-model="form.typeOfDemand" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light">
                                <el-form-item label="需求状态" label-position="top">
                                    <a-radio-group v-model="form.status">
                                        <a-radio value="进行中" disabled><a-tag color="#0fc6c2">开启</a-tag></a-radio>
                                        <a-radio value="已结束" disabled><a-tag color="#f53f3f">关闭</a-tag></a-radio>
                                        <a-radio value="已完成" disabled><a-tag color="#00b42a">成功</a-tag></a-radio>
                                    </a-radio-group>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="招聘负责人"
                                    label-position="top">
                                    <el-input v-model="form.recruiterid" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <!-- 空白分隔区域 -->
                            <div style="height: 10px; border-top: 0px dashed #e4e7ed; margin: 6px 0;"></div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="具体招聘需求" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="选择JD"
                                    label-position="top">
                                    <el-input v-model="form.jobdescription" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="所在部门"
                                    label-position="top">
                                    <el-input v-model="form.departmentid" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="选择岗位"
                                    label-position="top">
                                    <el-input v-model="form.jobname" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="岗位性质"
                                    label-position="top">
                                    <el-input v-model="form.jobnature" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="需求人数"
                                    label-position="top">
                                    <el-input v-model="form.numberofpositions" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="工作地点"
                                    label-position="top">
                                    <el-input v-model="form.worklocation" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="期望到岗时间"
                                    label-position="top">
                                    <el-input v-model="form.expecttobeonduty" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="薪资区间"
                                    label-position="top">
                                    <el-input v-model="form.budgetsalary" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="发放模式"
                                    label-position="top">
                                    <el-input v-model="form.distributionmode" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="人员来源"
                                    label-position="top">
                                    <el-input v-model="form.sourceofpersonnel" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="学历要求"
                                    label-position="top">
                                    <el-input v-model="form.educationlevel" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="工作年限要求"
                                    label-position="top">
                                    <el-input v-model="form.yearsofexperiencemin" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="年龄要求"
                                    label-position="top">
                                    <el-input v-model="form.agerequirement" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="岗位职责"
                                    label-position="top">
                                    <el-input clearable style="width: 560px" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 8 }" v-model="form.jobdescription" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="任职要求"
                                    label-position="top">
                                    <el-input clearable style="width: 560px" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 8 }" v-model="form.qualifications" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="备注" label-position="top">
                                    <el-input clearable style="width: 560px" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 8 }" v-model="form.remarks" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <!-- 空白分隔区域 -->
                            <div style="height: 10px; border-top: 0px dashed #e4e7ed; margin: 6px 0;"></div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="已投简历" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light">
                                <el-table :data="ResumeData" border stripe>

                                    <el-table-column type="index" width="50" />
                                    <el-table-column v-for="col in ResumeInformation" :prop="col.id" :key="col.id"
                                        :label="col.label" :width="col.width">
                                    </el-table-column>
                                </el-table>

                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                                    direction="horizontal">
                                    <el-descriptions-item label="提交人："> <el-text class="mx-1"
                                            type="primary">{{form.demandsubmitter}}</el-text></el-descriptions-item>
                                    <el-descriptions-item label="提交时间：">{{form.creationdate}}</el-descriptions-item>
                                    <el-descriptions-item label="更新时间："
                                        :span="2">{{form.creationdate}}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </el-config-provider>
        </div>
    </div>
    <el-dialog title="招聘需求" fullscreen destroy-on-close v-model="isVisible">
        <hr>
        <insert></insert>
    </el-dialog>
    <el-dialog :title="DetailedRequirementsId+`编辑`" fullscreen destroy-on-close v-model="EditDisplay">
        <hr>
        <update :date="DetailedRequirementsId"></update>
    </el-dialog>
</template>

<script setup>
import request from '@/api/request'
import { ref, defineProps, reactive } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import insert from './insert.vue';
import update from './update.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';
const props = defineProps(['date'])
console.log("传出",props.date);

// 表单数据对象
const form = ref({
    // 基础信息部分
    requirementid: null,           // 编号，招聘需求唯一标识符
    jobname: '',               // 岗位名称
    departmentid: null,          // 归属部门编号，父级部门ID
    demandsubmitter: '',       // 需求提交人
    recruiterid: null,           // 负责招聘的HR人员ID，关联员工表
    typeOfDemand: '',          // 需求类型
    numberofpositions: '',     // 招聘人数
    jobdescription: '',        // 岗位职责表述
    qualifications: '',        // 岗位要求
    budgetsalary: '',          // 薪资范围
    jobnature: '',             // 岗位性质（如正式、实习、兼职、劳务派遣）
    sourceofpersonnel: '',     // 人员来源（如校招、社招、内聘）
    status: '',                // 状态（开启、关闭）
    creationdate: '',          // 创建时间
    genderrequirement: '',     // 性别要求
    agerequirement: '',        // 年龄要求
    travelrequirement: '',     // 出差要求
    educationlevel: '',        // 学历要求
    yearsofexperiencemin: '',  // 工作年限
    worklocation: '',          // 地点
    workexperience: '',        // 工作经历
    remarks: '',                // 备注（额外字段）
    expecttobeonduty: '',    // 期望工作
    distributionmode: '' // 发放方式
})

const DetailedData = () => {
    request({
        url: '/recruitmentBasics/findById',
        method: 'post',
        params: {
            requirementid: props.date
        }
    }).then(res => {
        form.value = res.data
        console.log(form.value);
    }).catch(error => {
        console.error('获取详情失败:', error)
    })
}
DetailedData()
// 默认选中第一个选项："开启"
const selectedStatus = ref('开启');
// 简历信息
const ResumeInformation = ref([{
    id: 'candidateid', label: '候选人编号', width: '160'
}, { id: 'resumeStatus', label: '简历状态', width: '100' }, { id: 'candidatename', label: '候选人姓名', width: '160' },
{ id: 'age', label: '年龄', width: '100' },
{ id: 'origin', label: '户口', width: '160' },
{ id: 'intendedPosition', label: '意向职位', width: '160' },

{ id: 'specialized', label: '专业', width: '160' },
{ id: 'school', label: '学校', width: '160' }
])
// 数据源
const ResumeData = ref([{
   
}])

const  reviewTheResumeAsNeeded=()=>{
    request({
        url: '/candidateresume/queryResumeRequirementsBasedOnStatus',
        method: 'get',
        params: {
            status: '待面试',
            demandId: props.date
        }
    }).then(res => {
        console.log(res.data);
        ResumeData.value = res.data
    }).catch(error => {
        console.error('获取详情失败:', error)

    })
}
reviewTheResumeAsNeeded()
//打印
const printPage = () => {
    window.print()
}
const isVisible = ref(false)
// 复制添加
const add = () => {
    isVisible.value = true
    router.push('./insert.vue')
}
//修改显示
const EditDisplay = ref(false)
// 需求id
const DetailedRequirementsId = ref();
//编辑
const Editor = () => {
    EditDisplay.value = true
    DetailedRequirementsId.value = form.value.requirementid
    console.log("获取"+DetailedRequirementsId.value);
    
}

//删除操作
const open = () => {
    ElMessageBox.confirm(
        '你确定要删除吗?',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',

            })
            emit("ref-table")
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })
        })
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}
</style>
